import React, { useEffect, memo,useState } from "react"
import { connect } from "react-redux"
import * as actionTypes from './store/actionCreators'
import { useLocation } from "react-router-dom"
import  DetailTop from "../../components/detail/detailtop/DetailTop.jsx"
import SongList from "../../components/detail/songlist/SongList.jsx"
import SongConsole from "../../components/detail/songlist/songconsole/songconsole"
import ControlSong from "../../baseUI/Control/controlSong"
import Scroll from "../../baseUI/scroll"
let AlbumID;
let songId =null;
const Detail = (props) => {
    // console.log(props,'111111111111')
    const { getDetailDataDispatch,songSheetDetail={},songUrl=[],songDetail=[],songLyric={} } = props;
    let {pathname} = useLocation();
    let [ SongId,setSongId] =useState(0);
    
    const {tracks=[]} = songSheetDetail
    // let id = pathname.replace('/detail/', '') || undefined ;
    let urlArray = pathname.split("/");
    // console.log(urlArray);
     AlbumID = parseInt(urlArray[2]);
    
    // useEffect(() => {
    //     if (!songSheetDetail.length) {
    //         getDetailDataDispatch()
    //     }
    //     getDetailDataDispatch()
   
    // }, [AlbumID])
    if(!SongId){
        songId =0;
    }
    else{
        songId = SongId;
    }
    
    // console.log(songId,'sddddd');
    // console.log(AlbumID,'+_+_+');
    useEffect(() => {
        if (!songSheetDetail.length) {
            getDetailDataDispatch()
        }
        getDetailDataDispatch()
   
    }, [])
    useEffect(() => {
        
        getDetailDataDispatch()
   
    }, [songId])

    
    return (
        <div>
            {/* <Scroll
                direction={"vertical"}
                refresh={true}
                onScroll={
                    (e) => {
                        // console.log(e.y)
                        if (e.y < -1142) {
                            
                        } else {
                            
                        }
                        
                    }
                }
                // pullUp={}
                // pullDown={} */}
                {/* > */}
            <DetailTop songSheetDetail={songSheetDetail} SongId={SongId} setSongId={setSongId}/>
            <SongList  tracks={tracks} SongId={SongId} setSongId={setSongId} songUrl={songUrl}/>
            {songUrl.length&&songDetail.length&&songLyric?<ControlSong  songUrl={songUrl} songDetail={songDetail} Lyric={songLyric}/>:<></>
            }
            
            {/* </Scroll> */}
        </div>
    )
}
const mapStateToDispatch = (dispatch) => {
    // console.log(dispatch); 
   
    return {
        getDetailDataDispatch() {
            // console.log(AlbumID,'333333');
                dispatch(actionTypes.getSongSheetDetail(AlbumID))
                dispatch(actionTypes.getSongUrl(songId))
                dispatch(actionTypes.getSongDetail(songId))
                dispatch(actionTypes.getSongLyric(songId))
                
                // dispatch(actionTypes.get(0))
            
        }
    }
}
const mapStateToProps = (state) => {
    // console.log(state,'state');
    return {
        songSheetDetail:state.songDetail.songSheetDetail,
        songUrl:state.songDetail.songUrl,
        songDetail:state.songDetail.songDetail.songs,
        songLyric:state.songDetail.songLyric.lrc
    }
}

export default connect(mapStateToProps, mapStateToDispatch)(memo(Detail))